<template>
  <div class="main">
        <p class="main_text">充值记录</p>
      <!-- 搜索 -->
      <div class="g-search">
        <!-- 时间选择区域 -->
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">付款时间:</span>
            <el-date-picker v-model="searchValue.startAt" type="date" placeholder="开始时间" @change="startTime"
              :clearable="false" :default-time="defaultTime(0, 0, 0)" />
            <span class="demonstration" style="
                display: inline-block;
                font-size: 12px;
                color: #898989;
                margin: 20px;
              ">至</span>
            <el-date-picker v-model="searchValue.endAt" type="date" placeholder="结束时间" @change="endTime"
              :clearable="false" :default-time="defaultTime1(23, 59, 59)" />
            &emsp;
            <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
              <el-radio label="1" size="large">今天</el-radio>
              <el-radio label="2" size="large">昨天</el-radio>
              <el-radio label="3" size="large">近三天</el-radio>
              <el-radio label="4" size="large">近一周</el-radio>
              <el-radio label="5" size="large">近一个月</el-radio>
              <el-radio label="6" size="large">近三个月</el-radio>
              <el-radio label="7" size="large">近一年</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="input_valye">
          <template v-if="companyId === 0">
            <span class="demonstration">公司名称</span>
            <el-input v-model.trim="searchValue.companyName" style="width: 200px;margin-right: 10px" />
          </template>
          <el-button class="solid" @click="handleSearch">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
    <!-- ############################################## 数据表格 ############################################## -->
    <div class="cyr-flex">
      <el-button type="primary" v-if="roleList.write" @click="handleExportExcel" style="width: fit-content">导出明细</el-button>
      <el-table :data="tableData"  class="mt20"  :show-overflow-tooltip="true"
        v-adaptive border>
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column label="充值时间" prop="createdAt">
          <template #default="scope">
            <span>{{ formatTime(scope.row.createdAt) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" prop="orderSn"></el-table-column>
        <el-table-column v-if="companyId === 0" label="公司名称" prop="companyName"></el-table-column>
        <el-table-column  v-if="companyId === 0" label="充值账户" prop="merchantNo"></el-table-column>
        <el-table-column label="充值方式" prop="type"></el-table-column>
        <el-table-column label="充值金额" prop="amount">
        </el-table-column>
        <el-table-column label="服务费" prop="serviceFee">
        </el-table-column>
      </el-table>
      <!-- ############################################## 分页 ############################################## -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import useAuthorize from "@/hooks/authorize";
import {
  RequestRecordPlatform
} from '@/api/path/index.js';
import moment from "moment";
import { ElMessage } from "element-plus";
import { formatJson, formatTimeHan } from '@/utils/index';
import { exportJson2Excel } from '@/utils/excel';
let roleList = useAuthorize();

const companyId = JSON.parse(localStorage.getItem("roleInfo")!).company
const page = ref(1);
const currentPage = ref(1)
const pageSize = ref(10)
const searchValue = ref({
  startAt: "",
  endAt: "",
  page: page.value,
  rows: 10,
  companyName: "",
  companyNode: "",
});

const radio = ref(""); //单选按钮
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};

/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    startAt: "",
    endAt: "",
    page: 1,
    rows: 10,
    companyName: '',
    companyNode: companyId
  };
  radio.value = "";
  currentPage.value = 1
  //请求数据
  initData(searchValue.value)
};
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format(
    "yyyy-MM-DD HH:mm:ss"
  );
  radio.value = "";
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format(
    "yyyy-MM-DD HH:mm:ss"
  );
  radio.value = "0";
};
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = "";
  searchValue.value.endAt = "";
  let now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  let now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  switch (radio.value) {
    case "1":
      searchValue.value.startAt = moment(now).format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1).format("YYYY-MM-DD HH:mm:ss");
      break;
    case "2":
      searchValue.value.startAt = moment(now)
        .subtract(1, "days")
        .format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1)
        .subtract(1, "days")
        .format("YYYY-MM-DD HH:mm:ss");
      break;
    case "3":
      searchValue.value.startAt = moment(now)
        .subtract(3, "days")
        .format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1).format("YYYY-MM-DD HH:mm:ss");
      break;
    case "4":
      searchValue.value.startAt = moment(now)
        .subtract(7, "days")
        .format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1).format("YYYY-MM-DD HH:mm:ss");
      break;
    case "5":
      searchValue.value.startAt = moment(now)
        .subtract(1, "months")
        .format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1).format("YYYY-MM-DD HH:mm:ss");
      break;
    case "6":
      searchValue.value.startAt = moment(now)
        .subtract(3, "months")
        .format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1).format("YYYY-MM-DD HH:mm:ss");
      break;
    case "7":
      searchValue.value.startAt = moment(now)
        .subtract(1, "years")
        .format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(now1).format("YYYY-MM-DD HH:mm:ss");
      break;
    default:
      break;
  }
};
/**
 * 搜索点击事件
 */
const handleSearch = () => {
  //时间是否存在
  if (searchValue.value.startAt !== "" && searchValue.value.endAt !== "") {
    if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) >= 0) {
      ElMessage.error("开始时间不能晚于结束时间");
    } else {
      page.value = 1;
      //请求数据
      initData(searchValue.value)
    }
  } else {
    page.value = 1;
    //请求数据
    initData(searchValue.value)
  }
};

const handleExportExcel = () => {
  const tHeader = ['编号', '充值时间', '订单号', '公司名称', '充值方式', '充值金额', '服务费']
  const filterVal = ['id', 'createdAt', 'orderSn', 'companyName', 'type', 'amount', 'serviceFee']
  const list = tableData.value.map((item, index) => {
    return {
      ...item,
      id: index
    }
  })
  const data = formatJson(filterVal, list)
  exportJson2Excel(tHeader, data, `${formatTimeHan(new Date())}公司充值记录`, undefined, undefined,)
}
const tableData = ref<any[]>([])
const total = ref()
function initData(search: any) {
  searchValue.value.rows = pageSize.value
  searchValue.value.page = currentPage.value
  companyId === 0 ? searchValue.value.companyNode = '' : searchValue.value.companyNode = companyId
  RequestRecordPlatform(search).then((res:any) => {
    tableData.value = res.resultObj.list
    total.value = res.resultObj.count
  })
}
// 格式化时间
const formatTime = computed(() => {
  return (time: any) => {
    return moment(time).format('YYYY-MM-DD')
  }
}
)
const handleCurrentChange = () => {
  searchValue.value.page = currentPage.value
  initData(searchValue.value)
}
initData(searchValue.value)
</script>
<style lang="scss" scoped>
@import "@/assets/css/plateform/Article/Content.css";
@import "@/assets/css/plateform/Shop/GoodsManage.css";

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    width: 100%;
    background-color: #fff;
  }

  .input_valye {
    margin: 10px 0;
  }
}
</style>
